<template>
	<!-- PC 端正常渲染 -->
	<div v-if="!isMobile" class="p-container">
		<Test/>
	</div>
	<!-- 移动端通过 Teleport 渲染到 body 内，实现全屏展示 -->
	<teleport to="body" v-if="isMobile">
		<div class="mobile-container">
			<Test/>
		</div>
	</teleport>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue'
import Test from "@/WebRTC/comps/test.vue";

// 响应式变量判断是否为移动端（这里以宽度768px作为判断依据）
const isMobile = ref(false)

function checkMobile() {
	isMobile.value = window.innerWidth < 768
}

onMounted(() => {
	checkMobile()
	window.addEventListener('resize', checkMobile)
})
onUnmounted(() => {
	window.removeEventListener('resize', checkMobile)
})
</script>

<style>
.mobile-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	/* 根据需求添加背景、内边距等样式 */
}
</style>
